<template>
  <div class="code-wrap">
    <div class="code-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部拉取" name="1"></el-tab-pane>
        <el-tab-pane label="待审核拉取" name="2"></el-tab-pane>
      </el-tabs>
      <div class="code-search">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="能力拉取名称">
            <el-input v-model="formInline.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="formInline.userName" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-wrap">
        <el-table ref="multipleTablejh" :data="tableData" border row-key="id" :expand-row-keys="[1]" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div class="child-table">
                <el-table :data="innerTableData" size="small">
                  <el-table-column type="index" label="序号" align="center" width="80" />
                  <el-table-column label="能力编码" prop="code" />
                  <el-table-column label="能力名称" prop="name" />
                  <el-table-column label="交付方式" prop="method">
                    <template #default="{ row }">
                      <el-tag>{{ row.method }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="提供单位" prop="provider" />
                  <el-table-column label="能力版本号" prop="tag" />
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button link type="primary" size="small" @click="goDetail(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column prop="code" label="拉取单号" align="center" />
          <el-table-column prop="orgName" label="申请单位" align="center" />
          <el-table-column prop="use" label="申请用途" align="center" />
          <el-table-column prop="time" label="申请时间" align="center" width="200" />
          <el-table-column prop="applyUser" label="申请人" align="center" width="100" />
          <el-table-column prop="status" label="状态" align="center" width="80">
            <template #default="scope">
              <span>{{ scope.row.status ? '已审核' : '待审核' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleDetail(scope.row)">详情</el-button>
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)" v-if="!scope.row.status">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <Auth v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
    <Detail v-if="isShowDetail" :currentRow="currentRow" @close="isShowDetail = false" />
  </div>
</template>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import to from 'await-to-js'
import Auth from './auth.vue'
import Detail from './detail.vue'
import { HandleType, UserInfo } from '@admin/views/access/review/data'

const activeName = ref('1')
let dataSource = ref([
  {
    id: 1,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100001',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  },
  {
    id: 2,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100002',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 3,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100003',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  },
  {
    id: 4,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100004',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 5,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100005',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  }
])

let tableData = ref([
  {
    id: 1,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100001',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  },
  {
    id: 2,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100002',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 3,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100003',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  },
  {
    id: 4,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100004',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 5,
    orgName: '中国移动通信集团河北有限公司',
    code: '100100005',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用'
  }
])

const innerTableData = ref([
  {
    Request_No: '100100007',
    code: 'A00100200007',
    abilityId: '39d0899ff09243e39b4f3f8ab4ba91f7',
    name: 'PCC策略管理',
    tag: 'API_2.25_java',
    type: '行业能力',
    method: 'API',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供PCC策略管理、机卡绑定和区域限制等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '义诚',
    contactPhone: '13715150077',
    mailbox: 'gaiyuhong@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/9 21:10:10',
    pullCount: '1'
  },
  {
    Request_No: '100100008',
    code: 'A00100200008',
    abilityId: 'd9a326e47a86454f99a662e4b3b6cf18',
    name: '物联卡定位',
    tag: 'API_2.26_java',
    type: '行业能力',
    method: 'SDK',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '待测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供基站定位经纬度、区号定位区域编码等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '麟超',
    contactPhone: '18351078990',
    mailbox: '42830@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/10 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100009',
    code: 'A00100200009',
    abilityId: '934dbb1c56fe4e2a9e24a7c26e47dfb7',
    name: 'OneNET-Core',
    tag: 'API_2.27_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供协议接入、设备安全、命令下发、物模型、系统存储等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '智志',
    contactPhone: '13467719111',
    mailbox: '42656@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/11 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100011',
    code: 'A00100200011',
    abilityId: 'b39a1266bf4e492ca7178e6bd997e2ab',
    name: '车辆通行能力',
    tag: 'API_2.29_java',
    type: '行业能力',
    method: 'H5',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供全链路的网络拓扑展示，网络拨测，异常结果告警等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '叶静宜',
    contactPhone: '13849038741',
    mailbox: '2908055220@qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/13 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100018',
    code: 'A00100200018',
    abilityId: 'c498d317d0b147099e9cf0ec6539afdd',
    name: '视频监控能力',
    tag: 'API_2.36_java',
    type: '通用能力',
    method: 'API',
    onStatus: '已上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewpassed: '',
    Reviewrejection: '',
    betestedStatus: '已测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供大屏、手机端展示、AI分析等等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '张淑智',
    contactPhone: '18822488887',
    mailbox: '120197356@ qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/20 21:15:09',
    pullCount: '1'
  }
])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
const isDialog = ref(false)
const isShowDetail = ref(false)
const currentRow = ref({})
const type = ref('edit')
const formInline = ref({
  name: '',
  userName: ''
})

const handleSearch = () => {}

const handleReset = () => {
  formInline.value = {
    name: '',
    userName: ''
  }
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  const name = tab.props.name * 1
  if (name === 1) {
    tableData.value = dataSource.value
  } else if (name === 2) {
    tableData.value = dataSource.value.filter((item) => !item.status)
  }
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const handleDetail = (row: any) => {
  currentRow.value = row
  isShowDetail.value = true
}

const handleEdit = (row: any) => {
  currentRow.value = row
  isDialog.value = true
}

const handleDelete = async (row: any) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该提供方?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  ElMessage.success('操作成功')
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  // search && searchTable()
}

const goDetail = (row: any) => {
  window.open(`http://10.12.6.88/demo/ability/${row.abilityId}`, '_blank')
}

const toggleRowExpansion = (row, expanded) => {
  console.log(row, expanded)
}

const fetchList = () => {}
</script>
<style lang="scss" scoped>
.code-wrap {
  padding: 20px;
  .code-content {
    background-color: #ffffff;
    padding: 10px;
    .code-search {
    }
    .table-wrap {
      .child-table {
        padding: 10px 20px;
      }
    }
    .pagination-wrap {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
